<template>
    <div class="app-container">
        <el-card>
            <el-row :gutter="20" class="update_log_card">
                <el-col :xs="24" :sm="12" :md="12" :lg="6" v-for="(item, index) in systemList" :key="index" style="margin-bottom: 10px">
                    <el-card
                        shadow="hover"
                        :style="{ background: `linear-gradient(-45deg, ${item.bgc[0]}, ${item.bgc[1]})`, cursor: 'pointer' }"
                        @click="handleClick(item.url)"
                        @mouseenter="handleMouseenter"
                        @mouseleave="handleMouseleave"
                    >
                        <div style="display: flex; align-items: center; padding: 10px">
                            <img :src="item.icon" style="width: 40px" />
                            <div style="color: #fff; margin-left: 30px">
                                <div style="font-size: 12px">{{ item.name }}</div>
                                <div style="font-size: 20px; margin-top: 5px">{{ 1000 }}</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
        <div style="margin-top: 10px">
            <title-card class="home-count">
                <div id="count-data" ref="countDataChartRef"></div>
            </title-card>
        </div>
    </div>
</template>
<script src="./index.ts" lang="ts" />

<style lang="scss">
@use '@/views/home/style.scss';
.app-container {
    margin: 10px;
}
</style>
